<!DOCTYPE html>
<html>
{include file="public/header" /}
<body>
<style>
    .layui-input-inline {
        width: 400px !important;
    }

    .s {
        clear: both;
        margin-top: 10px
    }
    .upload_more{
        margin-bottom: 20px;
    }
</style>

<div class="layui-fluid" id="app">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                        <ul class="layui-tab-title">
                            <li class="" onclick="go('index')">项目管理</li>
                            <li class="layui-this" onclick="location.reload()">新增项目</li>
                        </ul>

                        <div class="layui-tab-content" style="padding-left: 0px;padding-right: 0px">
                            <div class="layui-tab-item layui-show" style="padding-top: 15px">
                                <form class="layui-form " action="">

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">户主</label>
                                        <div class="layui-input-block" style="padding: 5px 0px;">
                                            <span>
                                                     <span v-for="(item2,index) in set_client"
                                                           @click="delClient(index)"
                                                           class="layui-btn layui-btn-sm">{{item2.name}} <i
                                                             class="layui-icon">&#x1006;</i></span>

                                                     </span>

                                            <button type="button" id="client_btn"
                                                    class="layui-btn layui-btn-sm"
                                                    onclick="select_client()">
                                                +选择
                                            </button>
                                            </span>
                                        </div>


                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">城市</label>
                                        <div class="layui-input-block">
                                            <div style="float: left">
                                                <select name="sheng" lay-verify="required">
                                                    <option value="">请选择省</option>
                                                    <option value="河南省">河南省</option>
                                                </select>
                                            </div>
                                            <div style="float: left">
                                                <select name="shi" lay-verify="required">
                                                    <option value="">请选择市</option>
                                                    <option value="周口市">周口市</option>
                                                </select>
                                            </div>
                                            <div style="float: left">
                                                <select name="xian" lay-verify="required">
                                                    <option value="">请选择县\区</option>
                                                    <option value="川汇区">川汇区</option>
                                                    <option value="东新区">东新区</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">详细地址</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="address" value="" class="layui-input"
                                                   placeholder="请输入"
                                                   lay-verify="required">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div style="float: left" class="layui-col-md6">
                                            <label class="layui-form-label">面积</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="area" value="" class="layui-input"
                                                       placeholder="请输入"
                                                       lay-verify="required">
                                            </div>
                                        </div>
                                        <div style="float:left" class="layui-col-md6">
                                            <label class="layui-form-label">户型</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="house_type" value="" class="layui-input"
                                                       placeholder="请输入"
                                                       lay-verify="required">
                                            </div>
                                        </div>
                                    </div>


                                    <div class="layui-form-item">
                                        <label class="layui-form-label">开始时间</label>
                                        <div class="layui-input-block">
                                            <input type="text" class="layui-input" id="time" name="start_time"
                                                   placeholder="请输入"
                                                   lay-verify="required">
                                        </div>

                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">管理队伍</label>
                                        <div class="layui-input-block" style="padding: 5px 15px;">
                                            <span>
                                                <span>项目经理</span>
                                                <span style="margin-left: 10px"> {{project}}</span>
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        style="margin-left: 10px"
                                                        onclick="select_pm()">
                                                    {{projectb}}
                                                </button>
                                            </span>
                                            <span style="margin-left: 10%">
                                                <span>客户经理</span>
                                                <span style="margin-left: 10px">{{customer}}</span>
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        style="margin-left: 10px"
                                                        onclick="select_am()">
                                                    {{customerb}}
                                                </button>
                                            </span>
                                            <span style="margin-left: 10%">
                                                <span>设计师</span>
                                                <span style="margin-left: 10px">{{designer}}</span>
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        style="margin-left: 10px"
                                                        onclick="select_ds()">
                                                    {{designerb}}
                                                </button>
                                            </span>
                                            <span style="margin-left: 10%">
                                                <span>质检</span>
                                                <span style="margin-left: 10px">{{quality}}</span>
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        style="margin-left: 10px"
                                                        onclick="select_qc()">
                                                    {{qualityb}}
                                                </button>
                                            </span>

                                        </div>


                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">封面图片</label>

                                        <div class="layui-input-block " style="width: auto;">

                                            <div class="layui-upload-drag" id="pic1" style="padding: 2px">
                                                <img class="layui-upload-img"
                                                     style="width: 120px;height: 120px; object-fit: cover;"
                                                     src="/res/img/thumb.png">
                                                <input type="hidden" name="project_picture" value=""
                                                       lay-verify="required">
                                            </div>

                                        </div>
                                    </div>

                                    <!--<div class="layui-form-item">-->
                                    <!--<label class="layui-form-label">施工图纸</label>-->

                                    <!--<div class="layui-input-block " style="padding: 5px 0px;">-->

                                    <!--&lt;!&ndash;<span class="layui-btn layui-btn-sm" >上传</span>&ndash;&gt;-->

                                    <!--<div class="layui-upload">-->
                                    <!--<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>-->
                                    <!--<div class="layui-upload-list">-->
                                    <!--<table class="layui-table">-->
                                    <!--<thead>-->
                                    <!--<tr><th>文件名</th>-->
                                    <!--<th>大小</th>-->
                                    <!--<th>状态</th>-->
                                    <!--<th>操作</th>-->
                                    <!--</tr></thead>-->
                                    <!--<tbody id="demoList"></tbody>-->
                                    <!--</table>-->
                                    <!--</div>-->
                                    <!--<button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
                                    <!--</div>-->


                                    <!--</div>-->

                                    <!--</div>-->


                                    <div class="layui-form-item">
                                        <label class="layui-form-label">项目图纸</label>

                                        <div class="layui-input-block layui-row " style="display: inline-block;margin-left: 0px;width: 90%;" >

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        平面及建筑标记图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[biaoji]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        原始尺寸测量图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[celiang]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        墙体拆改图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[chaigai]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        平面布局图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[buju]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        地面材质示意图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[shiyi]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        顶面天花布局图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[dingmian]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        顶面天花尺寸图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[dingmian_chichun]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        开关面板示意图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[kaiguan]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        墙面装饰布局图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[qiangmian]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        平面索引图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[suoyin]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        立面图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[limian]" value="">
                                                </div>
                                            </div>

                                            <div class="layui-col-xs2">
                                                <div class="layui-upload-drag upload_more"  style="padding: 2px;">
                                                    <div style="margin-top: 5px;" class="layui-elip">
                                                        剖面图
                                                    </div>
                                                    <img class="layui-upload-img"
                                                         style="width: 120px;height: 120px; object-fit: cover;"
                                                         src="/res/img/thumb.png">
                                                    <input type="hidden" name="tuzhi[paomian]" value="">
                                                </div>
                                            </div>


                                        </div>

                                    </div>


                                    <div class="layui-form-item form-footer2">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="add_project">立即提交</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            project: "",
            customer: "",
            quality: "",
            designer: "",
            projectb: "选择",
            customerb: "选择",
            designerb: "选择",
            qualityb: "选择",
            set_client: [],
        },
        methods: {
            delClient: function (index) {
                this.set_client.splice(index, 1);
            },
        },
    });

    function set_client(id, name,phone) {
        var i = 0;
        app.set_client.forEach(function (item, index) {
            if (item.id == id) {
                i = 1;
            }
        });
        if (i == 0) {
            app.set_client.push({name: name, id: id,phone:phone});
        }
        else {
            layer.msg('请不要重复选择哟！');
        }
    }


    layui.use(['form', 'upload', 'laydate'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;

        form.on('submit(add_project)', function (obj) {
            var localPm = layui.data('pm');
            var localAm = layui.data('am');
            // console.log(localPm.pmList);
            // console.log(jQuery.type(localPm.pmList));
            // console.log(localAm.amList);
            // console.log(jQuery.type(localAm.amList));
            var localDs = layui.data('ds');
            var localQc = layui.data('qc');
            if (app.set_client.length == 0) {
                layer.msg('户主不能为空！');
                return false;
            }
            if (jQuery.isEmptyObject(localPm.pmList)) {
                layer.msg('项目经理不能为空！');
                return false;
            }
            if (jQuery.isEmptyObject(localAm.amList)) {
                layer.msg('客户经理不能为空！');
                return false;
            }
            if (jQuery.isEmptyObject(localDs.dsList)) {
                layer.msg('设计师不能为空！');
                return false;
            }
            if (jQuery.isEmptyObject(localQc.qcList)) {
                layer.msg('质检不能为空！');
                return false;
            }
            obj.field['client'] = app.set_client;
            obj.field['prom'] = localPm.pmList;
            obj.field['cusm'] = localAm.amList;
            obj.field['des'] = localDs.dsList;
            obj.field['quli'] = localQc.qcList;
//            layer.msg(JSON.stringify(obj.field)); obj.field为当前容器的全部表单字段，名值对形式：{name: value}
            $.post("{:url('add_pro')}", obj.field, function (res) {
                if (res.code == 1) {

                    layer.msg(res.msg, {icon: 1},function () {
                        location.href='add_pro';
                    });
                    return;

                    $('#pic1 img').attr('src', '/res/img/thumb.png');
                    app.project = "";
                    app.customer = "";
                    app.quality = "",
                        app.designer = "",
                        app.projectb = "选择";
                    app.customerb = "选择";
                    app.qualityb = "选择",
                        app.designerb = "选择",
                        app.set_client = [];
                    $('.layui-form')[0].reset();
                    layui.data('pm', null);
                    layui.data('am', null);
                    layui.data('ds', null);
                    layui.data('qc', null);
                    return false;
                } else {
                    layer.msg(res.msg, {icon: 2}, function () {

                    })
                    return false;
                }
            });
            return false;
        });
        //拖拽上传
        upload.render({
            elem: '#pic1'
            , url: '/tool/qiniu/upload'
            , before: function () {
                layer.load(2);
            }
            , done: function (res) {
                layer.closeAll();
                console.log(res)
                $('#pic1 img').attr('src', res.data.url);//完整url
                $('#pic1 input').val(res.data.pic);//存入数据库中的部分url
            }
        });


        //同时绑定多个元素，并将属性设定在元素上
        upload.render({
            elem: '.upload_more'
            , url: '/tool/qiniu/upload'
            ,before: function(){
                layer.tips('上传中...', this.item, {tips: 1});
            }
            ,done: function(res, index, upload){
                var item = this.item;
                layer.tips('上传中完成', this.item, {tips: 1});
                console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增
                $(item).find('img').attr('src', res.data.url);
                $(item).find('input').val(res.data.pic);
            }
        })

        //执行一个laydate实例
        laydate.render({
            elem: '#time' //指定元素
        });
    });

    function select_pm() {
        layer.open({
            type: 2,
            title: '项目经理',
            shadeClose: true,
            shade: 0.01,
            area: ['50%', '650px'],
            content: "{:url('select_pm')}",
        });
    }

    function select_am() {
        layer.open({
            type: 2,
            title: '客户经理',
            shadeClose: true,
            shade: 0.01,
            area: ['50%', '650px'],
            content: "{:url('select_am')}",
        });
    }

    function select_ds() {
        layer.open({
            type: 2,
            title: '设计师',
            shadeClose: true,
            shade: 0.01,
            area: ['50%', '650px'],
            content: "{:url('select_ds')}",
        });
    }

    function select_qc() {
        layer.open({
            type: 2,
            title: '质检',
            shadeClose: true,
            shade: 0.01,
            area: ['50%', '650px'],
            content: "{:url('select_qc')}",
        });
    }

    function select_client() {
        layer.open({
            type: 2,
            title: '户主',
            shadeClose: true,
            shade: 0.01,
            area: ['60%', '650px'],
            content: "{:url('select_client')}",
        });
    }
</script>
</body>
</html>